/*
 * @Description: 结果页面组件
 * @Author: yingying.fan
 * @Date: 2019-03-19 10:52:59
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-03-19 11:51:26
 */
<template>
  <div class="result-wrapper">
    <img
      :src="iconUrl"
      v-show="iconUrl"
    >
    <!-- <i :class="['iconfont baseColorNoAcitve',iconClass]"></i> -->
    <div>
      <p class="fontsize30 result-state">{{text}}</p>
      <p class="fontsize28">{{desc}}</p>
      <span class="fontsize44">{{price}}</span>
    </div>
    <button
      class="fontsize30 baseBgColorWithActive"
      :class="[isBtnEnable?'baseBgColorWithActive':'invalid-btn']"
      @click="clickBtn"
    >{{btnText}}</button>
  </div>
</template>

<script>
export default {
  props: {
    iconState: {
      type: Number,
      default: null
    },
    // 文字30的传入这个
    text: {
      type: String,
      default: ''
    },
    // 文字28的传入这个
    desc: {
      type: String,
      default: ''
    },
    // 价格参数此参数
    price: {
      type: String,
      default: ''
    },
    // 按钮是否可用
    isBtnEnable: {
      type: Boolean,
      default: true
    },
    btnText: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconUrl() {
      let url = ''
      switch (this.iconState) {
        case 0:
          // 查询中
          url = require('../assets/result_wait.png')
          break
        case 1:
          // 成功
          url = require('../assets/result_success.png')
          break
        case 2:
          // 失败
          url = require('../assets/result_failure.png')
          break
        default:
          break
      }
      return url
    }
    // iconClass() {
    //   let icon = ''
    //   switch (this.iconState) {
    //     case 0:
    //       // 查询中
    //       icon = 'icon-time'
    //       break
    //     case 1:
    //       // 成功
    //       icon = 'icon-seceed'
    //       break
    //     case 2:
    //       // 失败
    //       icon = 'icon-cancel-o'
    //       break
    //     default:
    //       break
    //   }
    //   return icon
    // }
  },
  methods: {
    clickBtn() {
      if (this.isBtnEnable) {
        this.$emit('click')
      }
    }
  }
}
</script>

<style>
html,
body {
  background-color: #ffffff;
}
.result-wrapper {
  text-align: center;
  padding: 30px;
}
.result-wrapper > img {
  width: 180px;
  height: 180px;
  margin-top: 70px;
  border-radius: 50%;
}
/* .result-wrapper > i {
  display: inline-block;
  width: 140px;
  height: 140px;
  margin-top: 90px;
  border-radius: 50%;
  font-size: 140px;
} */
.result-wrapper > div {
  height: 246px;
  padding: 30px 0;
  color: #666666;
}
.result-state + span {
  color: #333333;
}
.result-wrapper > button {
  position: absolute;
  bottom: 60px;
  left: 30px;
  right: 30px;
  width: 690px;
  height: 80px;
  border-radius: 10px;
  border: none;
  color: #ffffff;
}
.invalid-btn {
  background-color: #cccccc;
}
</style>
